<template>
    <div class="home">
        <!-- 左边 -->
        <div class="left">
            <div class="doctor">
                <Card v-for="item in doctorData" :data="item" :key="item.jobNo"></Card>
            </div>
            <div class="nurse">
                <Card v-for="item in nurseData" :data="item" :key="item.jobNo"></Card>
            </div>
            <div class="pharmacy">
                <Card v-for="item in pharmacyData" :data="item" :key="item.jobNo"></Card>
            </div>
        </div>
        <!-- 右边 -->
        <div class="right">
            <!-- 当前可是排队情况 -->
            <lineUp></lineUp>
        </div>
    </div>
</template>

<script setup lang="ts">
import Card from './index/Cadr.vue'
import lineUp from './index/lineUp.vue'
import { onMounted, ref } from 'vue';
// 动态获取今日全院动态
const doctorData = ref([
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E11',
        buttText: '医生-今日当班',
        type: 'primary'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E12',
        buttText: '医生-今日当班',
        type: 'primary'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E13',
        buttText: '医生-今日当班',
        type: 'primary'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E14',
        buttText: '医生-今日当班',
        type: 'primary'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E15',
        buttText: '医生-今日当班',
        type: 'primary'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E16',
        buttText: '医生-今日当班',
        type: 'primary'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E17',
        buttText: '医生-今日当班',
        type: 'primary'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E18',
        buttText: '医生-今日当班',
        type: 'primary'
    }
])
const nurseData = ref([
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E11',
        buttText: '护士-今日当班',
        type: 'warning'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E12',
        buttText: '护士-今日当班',
        type: 'warning'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E13',
        buttText: '护士-今日当班',
        type: 'warning'
    }
])
const pharmacyData = ref([
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E11',
        buttText: '药房-今日当班',
        type: 'danger'
    },
    {
        img: 'https://inews.gtimg.com/newsapp_bt/0/9680744080/1000',
        name: '张三',
        jobNo: 'E12',
        buttText: '药房-今日当班',
        type: 'danger'
    }
])
onMounted(() => {

})
</script>

<style scoped lang="scss">
.home {
    padding: 20px;
    display: flex;
    height: 100%;

    .left {
        display: flex;
        width: 60%;
        flex-wrap: wrap;
        height: 100%;

        .doctor {
            width: 100%;
            flex-wrap: wrap;
            display: flex;
        }

        .nurse {
            width: 100%;
            display: flex;
        }

        .pharmacy {
            width: 100%;
            display: flex;
        }
    }

    .right {
        width: 400px;
        margin-left: 100px;
    }
}
</style>